<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入商品名称" clearable size="small" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="分类名称" prop="categoryName">
        <el-input v-model="queryParams.categoryName" placeholder="请输入分类名称" clearable size="small" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="品牌名称" prop="brandName">
        <el-input v-model="queryParams.brandName" placeholder="请输入品牌名称" clearable size="small" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="是否上架" prop="isPublish">
        <el-select v-model="queryParams.isPublish" placeholder="请选择是否上架" clearable size="small">
          <el-option v-for="dict in isPublishOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
          <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['pms:product:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['pms:product:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['pms:product:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" :loading="exportLoading" @click="handleExport" v-hasPermi="['pms:product:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="productList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="ID" align="center" prop="id" width="55" />
      <el-table-column label="商品名称" align="center" prop="name" />
      <el-table-column label="分类名称" align="center" prop="categoryName" />
      <el-table-column label="品牌名称" align="center" prop="brandName" />
      <el-table-column label="是否上架" align="center" prop="isPublish" :formatter="isPublishFormat" />
      <el-table-column label="排序" align="center" prop="sort" />
      <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['pms:product:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['pms:product:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    <!-- 添加或修改产品对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品分类" prop="categoryId">
              <el-select v-model="form.categoryId" placeholder="请选择产品分类" @change="categoryChange">
                <el-option-group v-for="group in productCategoryList" :key="group.id" :label="group.name">
                  <el-option v-for="item in group.children" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-option-group>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品品牌" prop="brandId">
              <el-select v-model="form.brandId" placeholder="请选择品牌" @change="brandChange">
                <el-option v-for="item in productBrandList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入商品名称" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="副名称" prop="subName">
              <el-input v-model="form.subName" placeholder="请输入副名称" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="关键字" prop="keywords">
              <el-input v-model="form.keywords" placeholder="请输入关键字" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="售价" prop="price">
              <el-input-number v-model="form.price" :precision="2" :step="1" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="市场价" prop="priceMarket">
              <el-input-number v-model="form.priceMarket" :precision="2" :step="1" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="成本价" prop="priceCost">
              <el-input-number v-model="form.priceCost" :precision="2" :step="1" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="库存" prop="stock">
              <el-input-number v-model="form.stock" :step="1" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="库存预警值" prop="lowStock">
              <el-input-number v-model="form.lowStock" :step="1" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单位" prop="unit">
              <el-input v-model="form.unit" placeholder="请输入单位" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="简介" prop="brief">
            <el-input v-model="form.brief" placeholder="请输入简介" />
          </el-form-item>
          <el-form-item label="图片" prop="pic">
            <el-input v-model="form.pic" placeholder="请输入图片" />
          </el-form-item>
          <el-form-item label="轮播图" prop="pics">
            <el-input v-model="form.pics" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-row>

        <el-form-item label="属性类型" prop="attributeCategoryId">
          <el-select v-model="form.attributeCategoryId" placeholder="请选择规格类型" @change="attributeCategoryChange">
            <el-option v-for="item in productAttrCategoryList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品规格: ">
          <el-card shadow="never" class="cardBg">
            <div v-for="(productAttr,idx) in selectProductSku" :key="idx">
              {{productAttr.name}}：
              <el-checkbox-group v-if="productAttr.handAddStatus===0" v-model="selectProductSku[idx].values">
                <el-checkbox v-for="item in getInputListSku(productAttr.inputList)" :label="item" :key="item" class="littleMarginLeft"></el-checkbox>
              </el-checkbox-group>
              <div v-else>
                <el-checkbox-group v-model="selectProductSku[idx].values">
                  <div v-for="(item,index) in selectProductSku[idx].options" :key="index" style="display: inline-block" class="littleMarginLeft">
                    <el-checkbox :label="item" :key="item"></el-checkbox>
                    <el-button type="text" class="littleMarginLeft" @click="handleRemoveProductSkuValue(idx,index)">删除
                    </el-button>
                  </div>
                </el-checkbox-group>

                <el-input v-model="addProductAttrValue" style="width: 160px;margin-left: 10px" clearable></el-input>
                <el-button class="littleMarginLeft" @click="handleAddProductSkuValue(idx)">增加</el-button>
              </div>
            </div>
          </el-card>

          <el-table style="width: 100%;margin-top: 20px" :data="skuStockList" border>
            <el-table-column v-for="(item,index) in selectProductSku" :label="item.name" :key="item.id" align="center">
              <template slot-scope="scope">
                {{getProductSkuSp(scope.row,index)}}
              </template>
            </el-table-column>
            <el-table-column label="图片" width="80" align="center">
              <template slot-scope="scope">
                <imageUpload v-model="scope.row.pic" :isShowTip="false" :limit="1" style="width: 50px" />
              </template>
            </el-table-column>
            <el-table-column label="销售价格" width="120" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.price" type="number"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="市场价格" width="120" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.priceMarket" type="number"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="成本价" width="120" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.priceCost" type="number"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="商品库存" width="120" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.stock" type="number"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="库存预警值" width="120" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.lowStock" type="number"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="SKU编号" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.skuCode"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="handleRemoveProductSku(scope.$index, scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button type="primary" style="margin-top: 20px" @click="handleRefreshProductSkuList">刷新列表
          </el-button>
          <!-- <el-button type="primary" style="margin-top: 20px" @click="handleSyncProductSkuPrice">同步价格
          </el-button>
          <el-button type="primary" style="margin-top: 20px" @click="handleSyncProductSkuStock">同步库存
          </el-button> -->
        </el-form-item>

        <el-form-item label="属性参数">
          <el-card shadow="never" class="cardBg">
            <div v-for="(item,index) in selectProductParam" :key="index" :class="{littleMarginTop:index!==0}">
              <div class="paramInputLabel">{{item.name}}:</div>
              <el-select v-if="item.inputType===1" class="paramInput" v-model="selectProductParam[index].value">
                <el-option v-for="item in getParamInputList(item.inputList)" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
              <el-input v-else class="paramInput" v-model="selectProductParam[index].value"></el-input>
            </div>
          </el-card>
        </el-form-item>

        <el-form-item label="详情">
          <editor v-model="form.detail" :min-height="192" />
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item label="是否推荐">
              <el-radio-group v-model="form.isRecommend">
                <el-radio v-for="dict in isRecommendOptions" :key="dict.dictValue" :label="parseInt(dict.dictValue)">{{dict.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否上架">
              <el-radio-group v-model="form.isPublish">
                <el-radio v-for="dict in isPublishOptions" :key="dict.dictValue" :label="parseInt(dict.dictValue)">{{dict.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="排序" prop="sort">
              <el-input-number v-model="form.sort" :step="1" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" type="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listProduct,
  getProduct,
  delProduct,
  addProduct,
  updateProduct,
  exportProduct,
} from "@/api/pms/product";
import { listProductCategory } from "@/api/pms/productCategory";
import { listProductBrand } from "@/api/pms/productBrand";
import { listProductAttrCategory } from "@/api/pms/productAttrCategory";
import { listProductAttribute } from "@/api/pms/productAttribute";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "Product",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 产品表格数据
      productList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否推荐(0不 1推荐)字典
      isRecommendOptions: [],
      // 是否上架(0下架, 1上架)字典
      isPublishOptions: [],
      // 状态(0正常1停用)字典
      statusOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        categoryName: null,
        brandName: null,
        isRecommend: null,
        isPublish: null,
        sort: null,
        status: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        categoryId: [
          { required: true, message: "分类ID不能为空", trigger: "blur" },
        ],
        name: [
          { required: true, message: "商品名称不能为空", trigger: "blur" },
        ],
        price: [{ required: true, message: "价格不能为空", trigger: "blur" }],
        stock: [{ required: true, message: "库存不能为空", trigger: "blur" }],
      },

      productCategoryList: [], // 分类数据
      productBrandList: [], // 品牌数据
      productAttrCategoryList: [], // 类型数据

      productAttributeList: [], // 属性列表

      selectProductSku: [], // 选择的规格列表
      selectProductParam: [], // 选择的参数列表

      addProductAttrValue: "", //可手动添加的产品属性
      skuStockList: [], // sku列表
      productAttributeValueList: [], // 产品属性
    };
  },
  created() {
    this.getList();
    this.getDicts("pms_recommend_status").then((response) => {
      this.isRecommendOptions = response.data;
    });
    this.getDicts("pms_publish_status").then((response) => {
      this.isPublishOptions = response.data;
    });
    this.getDicts("pms_data_status").then((response) => {
      this.statusOptions = response.data;
    });

    this.getProductCategoryList(); // 商品分类数据
    this.getProductBrandList(); // 品牌数据
    this.getProductAttributeCategoryList(); // 属性类型数据
  },
  methods: {
    // 产品属性选择改变
    attributeCategoryChange(attributeCategoryId) {
      this.getProductAttributeList(attributeCategoryId);
    },

    // 获取属性列表
    getProductAttributeList(attributeCategoryId) {
      listProductAttribute({
        attributeCategoryId: attributeCategoryId,
      }).then((response) => {
        let list = response.rows;
        this.selectProductSku = [];
        this.selectProductParam = [];
        for (let i = 0; i < list.length; i++) {
          if (list[i].type === 0) {
            // 规格属性
            let options = [];
            let values = [];
            // TODO 编辑条件下获取手动添加编辑数据

            this.selectProductSku.push({
              id: list[i].id,
              name: list[i].name,
              handAddStatus: list[i].handAddStatus,
              inputList: list[i].inputList,
              values: values,
              options: options,
            });
          } else {
            let value = null;
            // 编辑模式下获取参数属性
            if (this.form.id) {
              value = this.getEditParamValue(list[i].id);
            }
            // 参数属性
            this.selectProductParam.push({
              id: list[i].id,
              name: list[i].name,
              value: value,
              inputType: list[i].inputType,
              inputList: list[i].inputList,
            });
          }
        }
        this.productAttributeList = response.rows;
      });
    },
    /** 规格操作相关方法start */
    // 获取输入的SKU
    getInputListSku(inputList) {
      return inputList.split(",");
    },
    // 处理移除产品的SKU值
    handleRemoveProductSkuValue(idx, index) {
      this.selectProductSku[idx].options.splice(index, 1);
    },

    handleRemoveProductAttrValue(idx, index) {
      this.selectProductAttr[idx].options.splice(index, 1);
    },
    // 处理刷新SKU
    handleRefreshProductSkuList() {
      this.$confirm("刷新列表将导致sku信息重新生成，是否要刷新", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.refreshProductSkuList();
      });
    },
    handleRemoveProductSku(index, row) {
      let list = this.skuStockList;
      if (list.length === 1) {
        list.pop();
      } else {
        list.splice(index, 1);
      }
    },
    // 属性SKU列表
    refreshProductSkuList() {
      this.skuStockList = [];
      let skuList = this.skuStockList;
      //只有一个属性时
      if (this.selectProductSku.length === 1) {
        let attr = this.selectProductSku[0];
        for (let i = 0; i < attr.values.length; i++) {
          skuList.push({
            spData: JSON.stringify([{ key: attr.name, value: attr.values[i] }]),
          });
        }
      } else if (this.selectProductSku.length === 2) {
        let attr0 = this.selectProductSku[0];
        let attr1 = this.selectProductSku[1];
        for (let i = 0; i < attr0.values.length; i++) {
          if (attr1.values.length === 0) {
            skuList.push({
              spData: JSON.stringify([
                { key: attr0.name, value: attr0.values[i] },
              ]),
            });
            continue;
          }
          for (let j = 0; j < attr1.values.length; j++) {
            let spData = [];
            spData.push({ key: attr0.name, value: attr0.values[i] });
            spData.push({ key: attr1.name, value: attr1.values[j] });
            skuList.push({
              spData: JSON.stringify(spData),
            });
          }
        }
      } else {
        let attr0 = this.selectProductSku[0];
        let attr1 = this.selectProductSku[1];
        let attr2 = this.selectProductSku[2];
        for (let i = 0; i < attr0.values.length; i++) {
          if (attr1.values.length === 0) {
            skuList.push({
              spData: JSON.stringify([
                { key: attr0.name, value: attr0.values[i] },
              ]),
            });
            continue;
          }
          for (let j = 0; j < attr1.values.length; j++) {
            if (attr2.values.length === 0) {
              let spData = [];
              spData.push({ key: attr0.name, value: attr0.values[i] });
              spData.push({ key: attr1.name, value: attr1.values[j] });
              skuList.push({
                spData: JSON.stringify(spData),
              });
              continue;
            }
            for (let k = 0; k < attr2.values.length; k++) {
              let spData = [];
              spData.push({ key: attr0.name, value: attr0.values[i] });
              spData.push({ key: attr1.name, value: attr1.values[j] });
              spData.push({ key: attr2.name, value: attr2.values[k] });
              skuList.push({
                spData: JSON.stringify(spData),
              });
            }
          }
        }
      }
    },

    handleAddProductSkuValue(idx) {
      let options = this.selectProductSku[idx].options;
      if (this.addProductAttrValue == null || this.addProductAttrValue == "") {
        this.$message({
          message: "属性值不能为空",
          type: "warning",
          duration: 1000,
        });
        return;
      }
      if (options.indexOf(this.addProductAttrValue) !== -1) {
        this.$message({
          message: "属性值不能重复",
          type: "warning",
          duration: 1000,
        });
        return;
      }
      this.selectProductSku[idx].options.push(this.addProductAttrValue);
      this.addProductAttrValue = null;
    },

    getProductSkuSp(row, index) {
      let spData = JSON.parse(row.spData);
      if (spData != null && index < spData.length) {
        return spData[index].value;
      } else {
        return null;
      }
    },
    /** 规格操作相关方法end */

    /** 属性相关操作方法start */

    // 获取编辑属性的值
    getEditParamValue(id) {
      let productAttributeValueList =
        this.form.params.productAttributeValueList;
      if (productAttributeValueList != null) {
        for (let i = 0; i < productAttributeValueList.length; i++) {
          if (id === productAttributeValueList[i].attributeId) {
            return productAttributeValueList[i].value;
          }
        }
      }
    },
    // 获取输入值列表
    getParamInputList(inputList) {
      return inputList.split(",");
    },
    /** 属性相关操作方法end */

    /** 查询产品列表 */
    getList() {
      this.loading = true;
      listProduct(this.queryParams).then((response) => {
        this.productList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 是否推荐(0不 1推荐)字典翻译
    isRecommendFormat(row, column) {
      return this.selectDictLabel(this.isRecommendOptions, row.isRecommend);
    },
    // 是否上架(0下架, 1上架)字典翻译
    isPublishFormat(row, column) {
      return this.selectDictLabel(this.isPublishOptions, row.isPublish);
    },
    // 状态(0正常1停用)字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    // 表单重置
    reset() {
      this.form = {
        id: null,
        brandId: null,
        categoryId: null,
        attributeCategoryId: null,
        supplierId: null,
        merId: null,
        name: null,
        subName: null,
        keywords: null,
        brief: null,
        pic: null,
        pics: null,
        price: null,
        priceMarket: null,
        priceCost: null,
        sale: null,
        stock: null,
        lowStock: null,
        unit: null,
        detail: null,
        tags: null,
        categoryName: null,
        brandName: null,
        isRecommend: 0,
        isPublish: 0,
        isDel: null,
        sort: null,
        status: 0,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加产品";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getProduct(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改产品";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateProduct(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addProduct(this.form).then((response) => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除产品编号为"' + ids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delProduct(ids);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有产品数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.exportLoading = true;
          return exportProduct(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
          this.exportLoading = false;
        })
        .catch(() => {});
    },
    // 获取产品分类列表
    getProductCategoryList() {
      listProductCategory().then((response) => {
        this.productCategoryList = this.handleTree(
          response.data,
          "id",
          "parentId"
        );
      });
    },
    // 获取产品品牌列表
    getProductBrandList() {
      listProductBrand().then((response) => {
        this.productBrandList = response.rows;
      });
    },
    // 获取产品规格类别列表
    getProductAttributeCategoryList() {
      listProductAttrCategory().then((response) => {
        this.productAttrCategoryList = response.rows;
      });
    },
    // 产品分类改变
    categoryChange(e) {
      let obj = {};
      let productCategoryList = this.productCategoryList;
      for (let i = 0; i < productCategoryList.length; i++) {
        let children = productCategoryList[i].children;
        for (let j = 0; j < children.length; j++) {
          if (children[j].id == e) {
            obj = productCategoryList[i].children[j];
          }
        }
      }
      this.form.categoryName = obj.name;
      this.form.unit = obj.productUnit;
    },
    // 产品品牌变更
    brandChange(e) {
      let obj = {};
      obj = this.productBrandList.find((item) => {
        return item.id === e;
      });
      this.form.brandName = obj.name;
    },
  },
};
</script>
<style >
.littleMarginLeft {
  margin-left: 10px;
}

.littleMarginTop {
  margin-top: 10px;
}

.paramInput {
  width: 250px;
}

.paramInputLabel {
  display: inline-block;
  width: 100px;
  text-align: right;
  padding-right: 10px;
}

.cardBg {
  background: #f8f9fc;
}
.el-upload--picture-card {
  width: 60px;
  height: 60px;
  line-height: 60px;
}
</style>
